import React, { memo, useState } from "react";

import { TransitionGroup, CSSTransition } from "react-transition-group";

import './TransitionGroup.css'

const index = memo(() => {
  const [list, setList] = useState(["栗子", "苹果", "菊花"]);
  return (
    <div>
      <TransitionGroup>
        {list.map((v, i) => {
          return (
            <CSSTransition key={i} timeout={600} classNames="biu">
              <div>{v}</div>
            </CSSTransition>
          );
        })}
      </TransitionGroup>
      <button onClick={(e) => setList([...list, "嗷呜"])}>添加阿</button>
    </div>
  );
});

export default index;
